import React from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter, Route } from 'react-router-dom';
import { toJS } from 'mobx';
import { Table, SearchBar, Icon, List, InputItem, Select, Tools } from 'weaver-mobile';
import classNames from 'classnames';
import { RouteLayout, Browser  } from 'weaver-mobile-page';
import './index.less';

const ButtonGroup = RouteLayout.ButtonGroup;
const { FormItem } = List;
const { getLabel } = Tools; 
const getOpts = () => [
  {
    key: '0',
    showname: ""
  },
  {
    key: '1',
    showname: getLabel(523516, '已填写')
  },
  {
    key: '2',
    showname: getLabel(523517, '未填写')
  }
]

@inject('remindPersonStore')
@withRouter
@observer
export default class RemindPersonList extends React.Component {
  constructor(props) {
    super(props);

    this.store = props.remindPersonStore;
    this.state = { searchName: '', searchDept: [], status: '' }
  }

  componentDidMount() {
    const { getAllRemindPerson } = this.store;

    getAllRemindPerson();
  }
  
  buttonGroupData = [
    {
      key: 'clear',
      text: getLabel(31129, '取消'),
      onClick: () => this.props.history.go(-1),
    },
    {
      key: 'submit',
      text: getLabel(523312, '搜索'),
      onClick: () => {
        this.onSubmit();
        this.props.history.go(-1);
      },
      type: 'primary',
    },
  ];

  getData = () => { 
    let { filterAllPerson } = this.store;
    const data = [];

    filterAllPerson && toJS(filterAllPerson).forEach(person => {
      data.push({
        key: person.id,
        id: person.id,
        user: person.lastname,
        submitted: person.submitted,
        department: person.departmentName
      });
    });

    return data;
  }

  onSelectChange = ids => {
    const { onPersonSelect } = this.store;

    onPersonSelect(ids);
  }

  onRemindPersonChange = key => {
    const { onRemindPersonChange } = this.store;

    onRemindPersonChange(key);

    if (key !== 'clear') {
      this.props.history.goBack();
    }
  }

  onSearchNameChange = (value) => {
    this.setState({ searchName: value });
  }

  onSearchDeptChange = (ids, names, datas) => {
    this.setState({ searchDept: datas });
  }

  onSearchStatusChange = (status) => {
    this.setState({ status });
  }

  onSubmit = () => {
    const { filterRemindPerson } = this.store;
    const { searchName, searchDept, status } = this.state;
    const deptId = searchDept.length ? searchDept[0]['id'] : '';

    filterRemindPerson(searchName, deptId ,status);
  } 

  columns = [{
    title: getLabel(512467, '人员'),
    dataIndex: 'user',
    key: 'user',
    hide: 'false',
    render: (text, record) => {
      return (
        <span>{text}</span>
      )
    }
  }, {
    title: getLabel(27511, '部门'),
    dataIndex: 'department',
    key: 'department',
    hide: 'false'
  }, {
    title: getLabel(523519, '填写状态'),
    dataIndex: 'submitted',
    key: 'submitted',
    hide: 'false',
    render: (text, record) => {
      const status = text ? getLabel(523516, '已填写') : getLabel(523517, '未填写');

      return (
        <span className={classNames({ 'no-submit': !text })}>{status}</span>
      )
    }
  }];

  render() {
    const { layout, browser, remindPersonIds } = this.store;
    const { searchName, searchDept, status } = this.state;
    const rowSelection = {
      selectedRowKeys: remindPersonIds,
      onChange: this.onSelectChange,
      type: 'checkbox',
      bgColor: 'rgba(248, 252, 255, 1)',
    };

    return (
      <div className='wea-edc-mobile-remind-person-list'>
        <div className='header'>
          <SearchBar
            className={classNames('search-select', { 'search-has-advance': searchDept.length || status })}
            placeholder={getLabel(523518, "人员名称检索")}
            showExtraButton
            value={searchName}
            onChange={this.onSearchNameChange}
            extraButton={[
              { key: 'advanced', show: <Icon key="filter-o" type="filter-o" /> }
            ]}
            onExtraButtonClick={() => this.props.history.push(layout.path)}
            onSubmit={this.onSubmit}
          />
          <Route
            key={layout.id}
            path={layout.path}
            render={() => (
              <RouteLayout>
                <div
                  className="wm-route-layout wea-edc-mobile-person-search"
                >
                  <List>
                    <FormItem 
                      key='name'
                      label={getLabel('512467', '人员')}
                      wrap="nowrap"
                      line
                      content={(
                        <InputItem value={searchName} onChange={this.onSearchNameChange}/>
                      )}
                    />
                    <FormItem 
                      key='dept'
                      wrap='nowrap'
                      line
                      content={(
                        <Browser 
                          label={getLabel(27511, '部门')}
                          type={4}
                          store={browser}
                          title='选择部门'
                          icon={"icon-coms02-Data-center"}
                          iconBgcolor="#1a57a0"
                          textDecoration={true}
                          tabs={[
                            {
                              "key": "2",
                              "name": '组织结构',
                              "dataURL": null,
                              "dataParams": null,
                              "isSearch": false,
                              "showOrder": 0,
                              "selected": false
                            }, {
                              "key": "1",
                              "name": '按列表',
                              "dataURL": null,
                              "dataParams": {
                                "list": "1"
                              },
                              "isSearch": true,
                              "showOrder": 0,
                              "selected": false
                            }]}
                          replaceDatas={searchDept}
                          onChange={this.onSearchDeptChange}
                          isSingle={true}
                        />
                      )}
                    />
                    <FormItem 
                      key='status'
                      content={(
                        <Select
                          label={getLabel(523520, '状态')}  
                          options={getOpts()}
                          value={status}
                          onChange={this.onSearchStatusChange}
                        />
                      )}
                    />
                  </List>
                  <ButtonGroup data={this.buttonGroupData} isButton={true} />
                </div>
              </RouteLayout>
            )}
          />
        </div>
        <Table 
          rowSelection={rowSelection}
          rowKey="key"
          columns={this.columns}
          dataSource={this.getData()}
        />
        <footer>
          <span className='clear' onClick={() => this.onRemindPersonChange('clear')}>{getLabel(523372, '清除')}</span>
          <span onClick={() => this.onRemindPersonChange('unSubmit')}>{getLabel(523521, '选择未填写人员')}</span>
          {/* <span onClick={() => this.onRemindPersonChange('all')}>选择全部人员</span> */}
          <span className='sure' onClick={() => this.onRemindPersonChange('sure')}>{getLabel(523048, '确认')}</span>
        </footer>
      </div>
    )
  }
}